<template>
	<view class="updateProdBox">
		<view class="header">
			<view class="back" @click="GoBack"><</view>
			<view class="title">我的作品</view>
		</view>
		<uni-popup ref="popup" type="message" class="tip">
				<uni-popup-message :type="messageType" :message="messageText" :duration="2000" class="message"></uni-popup-message>
			</uni-popup>
			<uni-popup ref="popupdia" type="dialog">
			    <uni-popup-dialog type="error" mode="base" title="是否删除" content="这可不能后悔" :duration="0" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
			</uni-popup>
			<searchBar class="search" :searchList="currentSearchVideoList" 
			:searchAnimate="isSearchVideo"
			@chooseBlogForSearch = "chooseBlogForSearch"></searchBar>
			<view class="input">
				<input type="text" v-model="searchVideoContent" placeholder="搜索"
				@focus="searchAllVideo" @blur="cancelSearchAllVideo" @confirm="startSearchVideo"
				@input="changeSearchVideo">
				<text class="cancel" @click="cancel">取消</text>
				<i class="iconfont iconsousuo"></i>
			</view>
			<view class="contain">
				<view v-for="item,index in pagenationContent" :key="item.id">
					<prodItem :poster="item.poster"
					:prod="item.prod"
					:realname="item.realname"
					:time="item.time"
					:title="item.title"
					:way="item.way"
					:username="item.username"
					:id="item.id"
					:render="item.render"
					:text="item.text"
					@click.native="addYourVideo(item)"
					></prodItem>
				</view>
			</view>
			<view class="pagenation" v-if="allPageSize>pageSize">
				<uni-pagination show-icon="true" :total="allPageSize" :current="currentPageNum" 
				:pageSize="pageSize" @change="changePagenation"></uni-pagination>
			</view>
			<addProd v-if="addVideo&&openAddProd" :id="currentMyProdId" ref="addProd" :origin="origin"
			@disappealAddProd="disappealAddProd" @againGetProdList="againGetProdList"
			@readyDelProd="readyDelProd"></addProd>
		</view>
	</view>
</template>

<script>
	import prodItem from "../prod/prodItem.vue"
		import searchBar from "../../components/searchBar/search.vue"
		import uniPagination from '@/components/uni-pagination/uni-pagination.vue';
		import uniPopup from '@/components/uni-popup/uni-popup.vue';
		import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue';
		import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
		import animate from "../../animate.js"
		import addProd from "../../components/addProd/addProd.vue"
		export default{
			components:{
				prodItem,
				uniPopup,
				uniPopupMessage,
				uniPopupDialog,
				uniPagination,
				searchBar,
				addProd,
			},
			mixins:[animate.mixin],
			created() {
				this.getAllVideoList()
			},
			data(){
				return{
					currentMyProdId:0,
					showBlack:false,
					showText:false,
					textInfo:{},
					openAddProd:false,
					origin:"update",
					isSearchVideo:false,
					showVideo:false,
					playInfo:{},
					allVideoList:[],
					currentVideoList:[],
					searchVideoList:[],
					messageText:"",
					messageType:"",
					pageSize:7,
					currentPageNum:1,
					searchVideoContent:"",
					currentProd:""
				}
			},
			computed:{
				addVideo(){
					return (
					        this.user.status === "876ea4f21078c7d38e3b0bdc74a" ||
					        this.user.status === "d630fbb5fd6026ccb4af0eb68d3"
					      );
				},
				pagenationContent() {
					return this.currentVideoList.filter((item, index) => {
						return index > (this.currentPageNum - 1) * this.pageSize - 1 && 
						index <= (this.currentPageNum - 1) * this.pageSize - 1 + this.pageSize;
					});
				},
				currentSearchVideoList(){
					return this.searchVideoList.filter((item,index)=>{
						return index <=7
					})
				},
				allPageSize(){
					return this.allVideoList.length
				}
			},
			methods:{
				readyDelProd(){
					this.openDia()
				},
				GoBack(){
					uni.reLaunch({
						url:"/pages/chat/chat"
					})
				},
				againGetProdList(){
					this.getAllVideoList()
				},
				changePagenation(current) {
					console.log(current);
					this.currentPageNum=current.type==="next"?this.currentPageNum+1:this.currentPageNum-1
				},
				disappealAddProd(){
					this.getAllVideoList()
					this.openAddProd = false
				},
				addYourVideo(item){
					this.openAddProd = true
					setTimeout(()=>{
						let addProdItem = this.$refs.addProd
						addProdItem.In()
						addProdItem.posterSRC = item.poster
						addProdItem.videoSRC = item.product
						addProdItem.title = item.title
						this.currentMyProdId = item.id
						this.currentProd = item.prod
					})
					
				},
				cancel(){
					this.searchVideoContent = ""
					this.getAllVideoList()
				},
				chooseBlogForSearch(item){
					this.searchVideoContent = item.title
					this.startSearchVideo()
				},
				searchAllVideo(){
					//聚焦时触发
					this.isSearchVideo = true
					this.searchVideoList = this.allVideoList
				},
				cancelSearchAllVideo(){
					//不聚焦的时候触发
					this.isSearchVideo = false
				},
				startSearchVideo(){
				 uni.request({
				 	url:"https://www.ttzxh.icu:443/api/prod/chooseSearch",
				 	data:{
				 		searchTitle:this.searchVideoContent
				 	},
				 	success: (res) => {
				 		console.log(res)
				 		if(res.data.error===-1){
				 			this.currentVideoList = res.data.data
				 		}else{
				 			this.currentVideoList = []
				 		}
				 	},
				 	fail: (res) => {
				 		this.currentVideoList = this.allVideoList
				 	}
				 })
				},
				changeSearchVideo(){
					uni.request({
						url:"https://www.ttzxh.icu:443/api/prod/chooseSearch",
						data:{
							searchTitle:this.searchVideoContent
						},
						success: (res) => {
							console.log(res)
							if(res.data.error===-1){
								this.searchVideoList = res.data.data
							}else{
								this.searchVideoList = [{title:"没有找到(⊙o⊙)？"}]
							}
						},
						fail: (res) => {
							this.searchVideoList = this.allVideoList
						}
					})
				},
				closeVideo(){
					this.fadeOutScale()
					setTimeout(()=>{
						this.showVideo = false
						this.showText = false
						this.showBlack = false
					},300)
				},
				playVideo(playItem){
					this.fadeInScale()
					this.showVideo = true
					this.showBlack = true
					this.playInfo = playItem
				},
				readText(textItem){
					this.fadeInScale()
					this.showText = true
					this.showBlack = true
					this.textInfo = textItem
				},
				confirm(done){
					uni.request({
						method:"POST",
						url:"https://www.ttzxh.icu:443/api/prod/del",
						data:{
							id:this.currentMyProdId,
							status : this.user.status,
							username : this.user.username,
							prod : this.currentProd
						},
						header:{
							Authorization: uni.getStorageSync('LoginToken'),
						},
						success:(res)=> {
							if(res.data.error===-1){
								this.$refs.addProd.cancel()
								setTimeout(()=>{
									this.open();
									this.messageText = '删除成功';
									this.messageType = 'success';
								})
							}else{
								this.open();
								this.messageText = '删除失败,请再试一次吧';
								this.messageType = 'warn';
							}
						},
						fail: () => {
							this.open();
							this.messageText = '删除失败，稍后再试如果仍失败请联系我';
							this.messageType = 'error';
						},
						complete() {
							done()
						}
					})
				},
				close(done){
					done()
				},
				open() {
					this.$refs.popup.open();
				},
				openDia(){
					this.$refs.popupdia.open()
				},
				getAllVideoList() {
					uni.request({
						url:"https://www.ttzxh.icu:443/api/prod/search",
						success: (res) => {
							console.log(res)
						  if(res.data.error===-1){
								let video1 = res.data.data
								let video = video1.filter(item=>{
									return item.username = this.user.username
								})
								this.allVideoList = video
								this.currentVideoList = video
								this.searchVideoList = video
							}else{
								this.allVideoList = []
								this.currentVideoList = []
								this.searchVideoList = []
							}
						},
						fail: () => {
							//失败回调
						}
					})
				},
			}
		}
	</script>
	

<style lang="scss" scoped>
	.updateProdBox{
		width: 100%;
		height: 100vh;
		background-color: #D9D9D9;
		box-sizing: border-box;
		overflow-y: scroll;
		.header {
			z-index: 9;
			display: flex;
			width: 100%;
			height: 50px;
			background-color: #fff;
			position: fixed;
			justify-content: center;
			align-items: center;
			top: 0px;
			padding-top: 15px;
			box-shadow: 0 1px 5px 0px #000;
			transition: all 0.5s;
			.back {
				position: absolute;
				left: 0;
				color: #000;
				font-size: 30px;
				font-weight: 100;
				line-height: 80px;
				margin-left: 25px;
				&:active {
					color: $uni-text-select-color;
				}
			}
			.backTop {
				position: absolute;
				top: 0;
				bottom: 0;
				margin: auto;
				width: 30px;
				height: 30px;
				border-radius: 50%;
				right: 25px;
				background-image: url('../../static/icon/top.png');
				color: #fff;
				background-size: cover;
				transition: all 0.3s;
				&:active {
					top: -10px;
				}
			}
			.title {
				color: #000;
				width: 400upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				text-align: center;
			}
		}
		.BG{
				width: 100%;
				height: 100vh;
				position: fixed;
				z-index: -1;
				top: 0px;
				opacity: 0.5;
			}
			video{
				width: 90%;
				height: 40vh;
				position: fixed;
				left: 0;
				top: 0;
				bottom: 50px;
				right: 0;
				margin: auto;
				z-index: 12;
			}
			.openText{
				box-sizing: border-box;
				width: 90%;
				height: 70vh;
				position: fixed;
				left: 0;
				top: 0;
				bottom: 50px;
				right: 0;
				margin: auto;
				z-index: 12;
				background-color: #fff;
				overflow-y: scroll;
				padding: 5px 15px;
				.realname{
					color: #D1D5DA;
					margin: 15px;
				}
				h1{
					margin-left: 30px;
					margin-bottom: 10px;
				}
				.content{
					padding-top: 10px;
				}
			}
			.video{
				position: fixed;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				margin: auto;
				z-index: 10;
				background-color: rgba($color: #000000, $alpha: .5);
				
				.closeVideo{
					position: fixed;
					right: 50px;
					top: 50px;
					font-size: 40px;
					z-index: 11;
					color: #fff;
					&:active{
						color: red;
					}
				}
			}
			.addVideo{
				box-sizing: border-box;
				display: flex;
				width: 680upx;
				margin: 10px 35upx;
				height: 50px;
				align-items: center;
				justify-content: space-between;
				border-radius: 10px;
				padding: 5px 15px;
				background-color: rgba($color: #fff, $alpha: 0.3);
				&:active{
					background-color: rgba($color: #C7DEFF, $alpha: 0.3)
					
				}
				.addVideoText{
					
				}
				.tag{
					
				}
			}
			.input{
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;
				margin-top: 75px;
				width: 100%;
				height: 50px;
				input{
					width: 480upx;
					height: 30px;
					background-color: #C8C7CC;
					border-radius: 40px;
					padding: 5px 10px 5px 40px;
					margin-left: 20px;
				}
				.cancel{
					margin: 0 12px;
				}
				i{
					position: absolute;
					margin: auto;
						left:34px;
					
				}
			}
			.contain{
				margin-top: 15px;
			}
			.pagenation{
				display: flex;
				justify-content: center;
			}
			.search{
				top: 135px;
				left:25px;
				width: 550upx;
			}
		}
	
</style>
